

@media screen and (max-width:719px) {
    .p-header .p-image {
        padding-bottom: 73.4375%
    }
}

.p-header
    position: relative
    display: block
    width: 100%

.p-header .p-image
    display: block
    width: 100%
    padding-bottom: 550px
    background: center center/cover no-repea

.p-header #wave-canvas
    position: absolute
    bottom: -1px
    left: 0
    width: 100%
    height: 100%
    z-index: 0
    pointer-events: none

header 
    display: block
    position:fixed
    padding: 1em 0
    top: 0
    left: 0
    height: 100px
    width: 100%
    -webkit-transition: all 500ms ease-in-out
    transition: all 500ms ease-in-out
    z-index: 2


header #logo img
    text-indent: -9999px
    display: block
    background-size: contain
    height: 100%
    width: auto
  //  opacity: 0.68


header #logo 
    margin: 0 0 0 2em
    text-indent: -9999px
    display: block
    background-size: contain
    height: 100%
    width: 150px
    opacity: 0.68


/* scrolled effect */

header.scrolled 
    background: rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
    height: 60px

header.scrolled #nav-toggle 
    position: absolute
    top: 30px
    -webkit-transform: translateY(-15px)
    transform: translateY(-15px)

